<template>
  <div>
    <!-- 头部 begin -->
    <div class="header">
      <router-link tag="a" class="quit" to="/">退出</router-link>
    </div>
    <!-- 头部 end -->

    <!-- 菜单 begin -->
    <div class="sideMenu">
      <ul>
        <li>
          <h3>初级</h3>
        </li>
        <li>
          <router-link to="/main/first">我的第一个路由</router-link>
        </li>
        <li>
          <router-link to="/main/name">获取到路由name的值</router-link>
        </li>
        <li>
          <router-link to="/main/params/1314/qishon">地址栏传递参数</router-link>
        </li>
        <li>
          <router-link to="/main/params2/520/qs">地址栏传递参数（加入正则）</router-link>
        </li>
        <li>
          <!-- 注意这里的name对应的是路由的name -->
          <router-link :to="{ name: 'paramsMultiple', params: { username: 'qishon', age: 1818 }}">N个参数 地址栏上看不到参数</router-link>
        </li>
        <li>
          <router-link :to="{ path: '/main/paramsMultiple2', query: { username: 'zz', age: 22 }}">N个参数 地址栏上带参数</router-link><br/>
        </li>
        <li>
          <router-link to="/main/redirect/22/qishon">重定向</router-link>
        </li>
        <li>
          <button @click="goForward">动态设置路由（push）</button>
        </li>
        <li>
          <router-link to="/main/beforeEnter">beforeEnter</router-link>
        </li>
        <li>
          <router-link to="/main/beforeEnter2">beforeEnter2</router-link>
        </li>
        <li>
          <router-link tag="div" to="/main/tag">tag</router-link>
        </li>
        <li>
          <a href="/#/main/a/123/abc">a标签跳转路由</a><br>
          <a href="/#/main/a2?id=123&name=abc">a标签跳转路由（地址栏传参）</a><br>

          <a href="http://www.baidu.com">a标签可以跳转外链</a><br>
          <router-link to="http://www.baidu.com">router-link标签不能跳转外链</router-link><br>
        </li>

        <li>
          <h3>中高级</h3>
        </li>
        <li>
          <router-link to="/main/import">动态引入、设置标题</router-link>
        </li>
        <li>
          <button @click="goReplace">动态设置路由（replace）</button>
        </li>
        <li>
          <router-link to="/main/keepAlive">keep-alive缓存</router-link>
        </li>
        <li>
          <router-link to="/main/elseKeepAlive">keep-alive不缓存</router-link>
        </li>
        <li>
          <router-link to="/main/beforeRouteUpdate/12">beforeRouteUpdate(参数12)</router-link>
        </li>
        <li>
          <router-link to="/main/beforeRouteUpdate/45">beforeRouteUpdate(参数45)</router-link>
        </li>
        <li>
          <router-link :to="{path:'/scroll#anchor2'}">滚动行为</router-link>
        </li>
      </ul>
    </div>
    <!-- 菜单 end -->

    <!-- 内容 begin -->
    <div class="content">
      <!-- mode="in-out" 先进入后退出 -->
      <!-- mode="out-in" 先退出再进入 -->
      <transition name="fade" mode="out-in">
        <keep-alive>
          <router-view v-if="$route.meta.keepAlive"></router-view>
        </keep-alive>
      </transition>

      <transition name="fade" mode="out-in">
        <router-view v-if="!$route.meta.keepAlive"></router-view>
      </transition>
    </div>
    <!-- 内容 end -->

    <!-- 版权 begin -->
    <div class="footer">版权 @qishon 2018</div>
    <!-- 版权 end -->
  </div>
</template>
<script>
export default {
  components: {},
  data () {
    return {}
  },
  mounted () {

  },
  methods: {
    goForward () {
      this.$router.push('/main/forward')
    },
    goReplace () {
      this.$router.replace('/main/replace')
    }
  }
}
</script>
<style scoped>
  .header{
    height: 4rem;
    border-bottom: 2px solid #f5f5f5;
    background-color: #e3e3e3;
  }
  .header .quit{
    float: right;
    height: 4rem;
    line-height: 4rem;
    background-color: #e3e3e3;
  }
  .sideMenu{
    float: left;
    width: 250px;
    position: absolute;
    bottom: 22px;
    top:4rem;
    overflow-y: auto;
    background-color: #EDECE9;
    border-right: 2px solid #f5f5f5;
    transition: 0.7s;
  }
  .content{
    position: absolute;
    left: 250px;
    right: 0;
    bottom: 22px;
    top:4rem;
    transition: 0.7s;
  }
  .content >div{
    height: calc(100vh - 4rem - 22px);
    overflow-y: auto;
  }
  .footer{
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 22px;
    text-align: center;
    border-top: 2px solid #f5f5f5;
    background-color: #e3e3e3;
  }
  .router-active{
    background-color: lightsteelblue;
  }

  /*
    fade-enter:进入过渡的开始状态，元素被插入时生效，只应用一帧后立刻删除。
    fade-enter-active:进入过渡的结束状态，元素被插入时就生效，在过渡过程完成后移除。
    fade-leave:离开过渡的开始状态，元素被删除时触发，只应用一帧后立刻删除。
    fade-leave-active:离开过渡的结束状态，元素被删除时生效，离开过渡完成后被删除。
  */
  .fade-enter {
    /* 完全透明 */
    opacity:0;
  }
  .fade-leave{
    /* 完全不透明 */
    opacity:1;
  }
  .fade-enter-active{
    transition:opacity .2s;
  }
  .fade-leave-active{
    opacity:0;
    transition:opacity .2s;
  }
</style>
